<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">

        <div class="col-md-10 offset-md-1 col-xs-12">
          <form @submit.prevent="publish">
            <fieldset>
              <fieldset class="form-group">
                <input type="text"
                       class="form-control form-control-lg"
                       placeholder="Article Title"
                       v-model="article.title">
              </fieldset>
              <fieldset class="form-group">
                <input type="text"
                       class="form-control"
                       placeholder="What's this article about?"
                       v-model="article.description">
              </fieldset>
              <fieldset class="form-group">
                <textarea class="form-control"
                          rows="8"
                          placeholder="Write your article (in markdown)"
                          v-model="article.body"></textarea>
              </fieldset>
              <fieldset class="form-group">
                <input type="text"
                       class="form-control"
                       placeholder="Enter tags"
                       v-model="article.tag"
                       @keydown.enter.prevent="addTag">
                <div class="tag-list"></div>
              </fieldset>
              <div class="tag-list">
                <span class="tag-default tag-pill"
                      v-for="(tag, i) in article.tagList"
                      :key="i">
                  <i class="ion-close-round"
                     @click="deleteTag(i)"></i>
                  {{ tag }}
                </span>
              </div>
              <button class="btn btn-lg pull-xs-right btn-primary"
                      type="submit"
                      :disabled="publishDisable">
                Publish Article
              </button>
            </fieldset>
          </form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { createArticle, getArticle, updateArticle } from '@/api/article'

export default {
  middleware: 'authenticate',
  name: 'Editor',
  watchQuery: ['slug'],
  head() {
    return {
      title: 'editor',
      meta: [
        {
          hid: 'editor',
          name: 'editor',
          content: 'realworld editor'
        }
      ]
    }
  },
  async asyncData({ query }) {
    let data = null
    if (query.slug) {
      let result = await getArticle(query.slug)
      if (result.status === 200) {
        data = result.data
      }
    }
    console.log(data)
    if (data) {
      return {
        copyArticle: data.article,
        article: {
          title: data.article.title,
          description: data.article.description,
          body: data.article.body,
          tagList: data.article.tagList,
          tag: ''
        }
      }
    }
    return {}
  },
  data() {
    return {
      article: {
        title: '',
        description: '',
        body: '',
        tag: '',
        tagList: []
      },
      publishDisable: false
    }
  },
  methods: {
    addTag() {
      let { article } = this
      if (article.tag) {
        article.tagList.push(article.tag)
        article.tag = ''

      }
    },
    deleteTag(i) {
      let { article } = this
      if (i >= 0) {
        article.tagList.splice(i, 1)
      }
    },
    async publish() {
      this.publishDisable = true
      let result = null
      if (this.copyArticle) {
        // save
        console.log(this.article)
        result = await updateArticle(this.copyArticle.slug, {
          article: this.article
        })
      } else {
        // create
        result = await createArticle({
          article: this.article
        })
      }
      console.log(result)
      if (result.status === 200) {
        let { article } = result.data
        this.$router.push({
          name: 'article',
          params: {
            slug: article.slug
          }
        })
      }
      this.publishDisable = false
    }
  }
}
</script>

<style>
</style>